<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="http://192.168.112.141/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://192.168.112.141/css/nprogress.css">
<link rel="stylesheet" type="text/css" href="http://192.168.112.141/css/style.css">
<link rel="stylesheet" type="text/css" href="http://192.168.112.141/css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="http://192.168.112.141/images/icon.png">
<link rel="shortcut icon" href="http://192.168.112.141/images/favicon.ico">
<script src="http://192.168.112.141/js/jquery-2.1.4.min.js"></script>
<script src="http://192.168.112.141/js/nprogress.js"></script>
<!--
<script src="http://192.168.112.141/js/jquery.lazyload.min.js"></script>
-->
<!--[if gte IE 9]>
  <script src="http://192.168.112.141/js/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="http://192.168.112.141/js/html5shiv.min.js" type="text/javascript"></script>
  <script src="http://192.168.112.141/js/respond.min.js" type="text/javascript"></script>
  <script src="http://192.168.112.141/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 9]>
  <script>window.location.href='upgrade-browser.html';</script>
<![endif]-->
</head>
<body class="user-select">
<header class="header">
	<nav class="navbar navbar-default" id="navbar">
		<div class="container">
			<div class="header-topbar hidden-xs link-border">
				<ul class="site-nav topmenu">
					<#if nickname??>
						<li><a href="http://admin.news.com.cn:8080">内容管理(${nickname})</a></li>
					<#else>
						<li><a href="http://localhost:8080">登录</a></li>
						<li><a href="#">注册</a></li>
					</#if>
				</ul>
				勤记录 懂分享
			</div>
			<div class="navbar-header">
				<h1 class="logo hvr-bounce-in">
					<a href="#" title="木庄网络博客">
						<img src="http://192.168.112.141/images/201610171329086541.png" alt="木庄网络博客">
					</a>
				</h1>
			</div>
			<div class="collapse navbar-collapse" id="header-navbar">
				<ul class="nav navbar-nav navbar-right">
					<li><a title="网站首页" href="index.html">网站首页</a></li>
					<li><a title="列表页" href="list.html">频道页</a></li>
					<li><a title="详细页" href="show.html">频道页</a></li>
					<li><a title="列表页" href="list.html">频道页</a></li>
					<li><a title="详细页" href="show.html">频道页</a></li>
				</ul>
			</div>
		</div>
	</nav>
</header>
<section class="container">
	<div class="content-wrap">
		<div class="content">
			<article class="excerpt-minic excerpt-minic-index">
				<h2>
					<span class="red">【推荐】</span>
					<a href="#" target="_blank">用DTcms做一个独立博客网站（响应式模板）</a>
				</h2>
				<p class="note">
				用DTcms做一个独立博客网站（响应式模板），采用DTcms V4.0正式版（MSSQL）。开发环境：SQL2008R2+VS2010。DTcms V4.0正式版功能修复和优化：1、favicon.ico图标后台上传。（解决要换图标时要连FTP或者开服务器的麻烦）
				</p>
			</article>
			<div class="title">
				<h3>最新发布</h3>
				<div class="more">
					<#list categories as c>
						<a href="javascript:void(0);" onclick="listArticles(${c.categoryId},1)">${c.categoryName}</a>
					</#list>
				</div>
			</div>
			<div id="article-list">
			</div>
			<nav class="pagination">
			</nav>
		</div>
	</div>
	<aside class="sidebar">
		<div class="fixed">
			<div class="widget widget_search">
				<form class="navbar-form" action="/article/search" method="post">
					<div class="input-group">
						<input type="text" name="keyword" class="form-control" size="35" placeholder="请输入关键字" maxlength="15" autocomplete="off">
						<span class="input-group-btn">
							<button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
						</span>
					</div>
				</form>
			</div>
		</div>
		<div class="widget widget_hot">
			<h3>热门文章</h3>
			<ul>
				<#list articles as a>
					<li>
						<a href="/article/get_detail?articleId=${a.articleId}" target="_blank">
						<span class="thumbnail">
							<img class="thumb" src="http://192.168.112.141/images/1000.jpg" style="display: block;">
						</span>
							<span class="text" style="padding-bottom:10px">${a.title}</span>
							<span class="muted"><i class="glyphicon glyphicon-time"></i> ${a.createDate?string("yyyy-MM-dd")}</span>
							<span class="muted"><i class="glyphicon glyphicon-eye-open"></i> ${a.visitorNum}</span>
						</a>
					</li>
				</#list>
			</ul>
		</div>
	</aside>
</section>
<footer class="footer">
	<div class="container">
		<p>Copyright &copy; 2016.Company name All rights reserved.</p>
	</div>
</footer>
<script src="http://192.168.112.141/js/bootstrap.min.js"></script>
<script src="http://192.168.112.141/js/jquery.ias.js"></script>
<script src="http://192.168.112.141/js/scripts.js"></script>
<script type="text/javascript">

function showArticle(article, index) {
	let text = '<article class="excerpt excerpt-' + index + '" style=""><a class="focus" href="/article/get_detail?articleId=' +
		article.articleId + '" target="_blank"><img class="thumb" src="http://192.168.112.141/images/1000.jpg" alt="" ' +
		'style="display: inline;"></a><header><a class="cat" href="#">' + article.category.categoryName  + '<i></i></a><h2>' +
		'<a href="/article/get_detail?articleId=' + article.articleId + '" target="_blank">' + article.title + '</a></h2></header>' +
		'<p class="meta"><time class="time"><i class="glyphicon glyphicon-time"></i> ' + article.createDate + '</time>' +
		'<span class="views"><i class="glyphicon glyphicon-eye-open"></i> ' + article.visitorNum + '</span>' +
		'<a class="comment" href="" target="_blank"><i class="glyphicon glyphicon-comment"></i> ' + article.commentNum +
		'</a></p><p class="note">' + article.summary + '</p></article>';

	return text;
}

function showPagination(cid, page, total) {
	let text = '<ul><li class="prev-page">';

	if (page == 1) {
		text += '<a href="javascript:void(0)">上一页</a></li>';
	} else {
		text += '<a href="javascript:void(0)" onclick="listArticles(' + cid + ',' + (page-1) + ')">上一页</a></li>';
	}

	for(i = 1; i <= total; i++) {
		if (i == page) {
			text += '<li class="active"><span>' + i + '</span></li>';
		} else {
			text += '<li><a href="javascript:void(0);" onclick="listArticles(' + cid + ',' + i + ')">' + i + '</a></li>';
		}
	}

	text += '<li class="next-page">';

	if (page == total) {
		text += '<a href="javascript:void(0)">下一页</a></li></ul>';
	} else {
		text += '<a href="javascript:void(0)" onclick="listArticles(' + cid + ',' + (page+1) + ')">下一页</a></li></ul>';
	}

	return text;
}

function listArticles(categoryId, pageNum) {
	let content = '';
	$.ajax({
		type: 'POST',
		url: '/article/list_articles?categoryId=' + categoryId + "&pageNum=" + pageNum,
		dataType: 'json',
		success:function(data){
			$.each(data.dataList, function (index, value) {
				content += showArticle(value, index + 1);
			});

			$("#article-list").html(content);
			$(".pagination").html(showPagination(categoryId, pageNum, data.pageCount));
		}
	})
}

$(function () {
	listArticles(1, 1);
})
</script>

</body>
</html>
